<template>
    <tr-base-popup title="司机评价" type="center" borderRadius="18rpx" ref="skyBasePopupRef">
        <view class="form-box">
            <view class="title">司机：张三</view>
            
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-width="200rpx" label-position="top">
                <uni-forms-item label="评价星级" name="account">
                    <up-rate :count="5" v-model="form.count" size="32" activeColor="orange" :disabled="disabled"></up-rate>
                </uni-forms-item>
                <uni-forms-item label="评价内容" name="content">
                    <uni-easyinput v-model="form.content" type="textarea" placeholder="请输入内容" :disabled="disabled"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="标签" name="content">
                    <qly-multiple-tags v-model="form.tagList" :tagList="tagList" :disabled="disabled"/>
                </uni-forms-item>
            </uni-forms>
        </view>
        <template #footer>
            <up-button v-if="!disabled" type="primary" shape="circle" text="确 认" @tap="qly.form.pass(confirm,formRef)"></up-button>
        </template>
    </tr-base-popup>
</template>
<script setup>

const props=defineProps({
    disabled:{
        type: Boolean,
        default: false
    }
})
const skyBasePopupRef = ref()

const formRef = ref()
const form = ref({
    count: 2,
    content: '',
    tagList: [1,3],
})

const rules = {
    // 对name字段进行必填验证
    content: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
}

const tagList = [{
    label: '司机很好',
    value: 1
},{
    label: '有耐心',
    value: 2
},{
    label: '态度不好',
    value: 3
},{
    label: '态度很差',
    value: 4
}]

const open = () => {
    skyBasePopupRef.value.open()
}
const close = () => {
    skyBasePopupRef.value.close()
}

const confirm=()=>{
    close()
}
defineExpose({
    open
})
</script>
<style scoped lang="scss">
.form-box {
    width: 80vw;
    
    .title {
        font-size: 32rpx;
        margin-bottom: 24rpx;
    }
}
</style>
